﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery支持拖动图片上传预览代码</title>
</head>

<script src="js/jquery.js"></script>
<script src="js/upload.js"></script>

<!-- 
<h3>可将图片拖拽到下框中</h3>
<div id="drop_area"></div>

<script type="text/javascript">
var dragImgUpload = new DragImgUpload("#drop_area",{
	callback:function (files) {
		//回调函数，可以传递给后台等等
		var file = files[0];
		console.log(file.name);
	}
})
</script> -->
  <input type="file" id="file" onchange="showPreview(this, 'portrait')" />
  <img src="" id="portrait" style="width: 200px; height: 200px; display: block;" />
  <script>
  function showPreview(source, imgId) {
    var file = source.files[0];
    if(window.FileReader) {
      var fr = new FileReader();
      fr.onloadend = function(e) {
        document.getElementById(imgId).src = e.target.result;
      }
      fr.readAsDataURL(file);
    }
  }
  </script>






<!-- </div> -->
</body>
</html>
